<template>
  <div class="plcPoint-list">
     <el-page-header @back="goBack" >
    </el-page-header>
    <div style="height: 60px">
      <el-button type="primary" @click="addPlcPointData" style="margin: 5px;float: right">新增</el-button>
      <upload-plcPoint style="margin: 5px;float: right"></upload-plcPoint>
    </div>
    <el-table
      stripe
      height="800"
      :data="pointDataList"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="plc点位名称"
        width="350"
        prop="point_name"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="plc点位类型"
        width="350"
        prop="point_type_name"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="点位下标"
        prop="index"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="温度显示"
        prop="point_sign"
      >
      </el-table-column>
      <el-table-column
        align="center"
        width="200"
        label="操作"
        prop="handler"
      >
        <template slot-scope="{row}">
          <span @click="editPointClick(row)"><svg-icon class="handler-icon" icon-class="edit"/></span>
          <span @click="delPointClick(row.point_id)"><svg-icon class="handler-icon" icon-class="right"/></span>
        </template>
      </el-table-column>
    </el-table>
    <plcPoint-form ref='plcPoint_from_dialog'/>
  </div>
</template>

<script>
  import PlcPointForm from './PlcPointForm'
  import UploadPlcPoint from './UploadPlcPoint'

  export default {
    name: "plcDeviceList",
    components: {PlcPointForm,UploadPlcPoint},
    methods: {
      queryData(){
        let me = this;
        this.$axios.post('plcPointRoutes', {
          action_type: 'plcPointQuery',
          device_id:me.$route.params.device_id
        }).then(function (response) {
          me.pointDataList = response.data.data;
          return {success : true}
        });
      },
      editPointClick(record) {
        let formDate = JSON.parse(JSON.stringify(record));//由于vue双向绑定的缘故，form表单中数据变换会营销到表格中的数据同时变换，因此这里需要进行一次转换操作避免绑定情况出现
        this.$refs.plcPoint_from_dialog.setForm(formDate);
      },

      delPointClick(point_id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let me = this;
          this.$axios.post('plcPointRoutes',{
            action_type: 'plcPointDelete',
            point_id:point_id,
          }).then(function (response) {
            if(response.data.success) me.$message({type: 'success',message: '删除成功!'});
            else me.$message({type: 'error',message: '删除失败!'});
            me.queryData();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addPlcPointData() {
        this.$refs.plcPoint_from_dialog.setForm();
      },
      goBack() {
        this.$router.push({name: 'plcDeviceList', params: {enterprise_id:this.$route.params.enterprise_id}})
      },
    },
    data() {
        return {
          pointDataList : [],
        }
    },
    created() {
      let me = this;
      if(me.$route.params.device_id){
        me.queryData();
      }else{
        if(me.$route.params.enterprise_id){
          this.$router.push({name: 'plcDeviceList', params: {enterprise_id: me.$route.params.enterprise_id}});
        }else{
          this.$router.push({name: 'Enterprise'});
        }

      }
    },

  }
</script>

<style lang="scss" scoped>
  .plcPoint-list {
    background-color: #fff;
  }
  .el-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
  }
</style>
